<template>
  <div class="box" id="AHP">
    <van-row justify="center">
      <van-col span="6">
        <div style="
                            width: 100%;
                            height: 100%;
                            line-height: 300%;
                            text-align: center;
                            font-size: 18px;
                          ">
          功能列表
        </div>
      </van-col>
      <van-col span="6" v-if="RYD_State != 4">
        <div style="
                            width: 100%;
                            height: 100%;
                            line-height: 300%;
                            text-align: right;
                            font-size: 18px;
                            color: #466ca3;
                          ">
          <el-badge :value="otherCompany">
            <el-select v-model="RYD_CompanyNo" @change="setCompany">
              <el-option v-for="item in companyColumns" :key="item.ryD_Id" :label="item.ryD_CompanyName"
                :value="item.ryD_CompanyNo" />
            </el-select>
          </el-badge>
        </div>
      </van-col>
      <van-col span="6" offset="4" v-if="RYD_State != 4">
        <div style="
                            width: 100%;
                            height: 100%;
                            line-height: 230%;
                            text-align: right;
                            font-size: 18px;
                          " v-if="RYD_State == 1">
          <van-button color="#466ca3" size="normal" plain style="height: 70%" to="AndroidRegIt">I T
          </van-button>
        </div>
        <div style="
                            width: 100%;
                            height: 100%;
                            line-height: 300%;
                            text-align: right;
                            font-size: 18px;
            
                          " v-if="RYD_State >= 2">

          <el-select placeholder="后台操作">

            <el-option @click="to('AndroidPersonnel')" value="1">
              人员
            </el-option>
            <el-option @click="to('AndroidType')" v-if="RYD_State == 3" value="2">
              分类
            </el-option>
            <el-option @click="to('AndroidUpdateUser')" value="3">
              资料
            </el-option>

          </el-select>
        </div>
      </van-col>
      <van-col span="1"></van-col>
    </van-row>
    <van-divider style="
                        background-color: #466ca3;
                        margin: 0;
                        height: 0.8vw;
                        color: #466ca3;
                        border: 0;
                      " />

    <van-cell icon="records" title="需求管理" is-link to="AndroidDemandList" size="large" v-if="RYD_State != 4">
      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
      <view v-if="demandNum > 0">
        <van-tag round type="danger" size="medium">{{ demandNum }}</van-tag>
      </view>
    </van-cell>
    <van-cell icon="description" title="记录报表" is-link to="AndroidDemandConfirmation" size="large" v-if="RYD_State != 4" />
    <van-cell icon="completed" title="需求记录" v-if="RYD_State == 2 && RYD_State != 4" is-link to="AndroidRecordDemand"
      size="large" />
    <van-cell icon="send-gift-o" title="应急方案管理" v-if="RYD_State == 4" is-link to="AndroidContingencyPlan" size="large" />
    <van-overlay :show="loading">
      <div class="wrapper">
        <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
      </div>
    </van-overlay>

    <div style="position: fixed ; bottom:100px;right:10px ">
      <el-row @click="show = true">
        <div class="bubble bubble-right">
          你好！<br />
          有什么需要我们帮助的吗？
        </div>
        <el-avatar src="/img/智能机器人模板.png" :size="50" />
      </el-row>
      <van-action-sheet v-model:show="show" title="在线解决" style="max-height: 90% ;height:90%">
        <chatui style="height: 100% ;"></chatui>
      </van-action-sheet>
    </div>
  </div>
</template>

<script setup async>
import { inject, nextTick, onMounted, ref } from "vue";

import axios from "@/utils/axios";
// eslint-disable-next-line no-unused-vars
import { useRouter } from "vue-router";

import { Dialog, Notify } from "vant";
import chatui from "../ChatUi.vue";

const router = useRouter();

let nav = inject("nav");
nav.showLeft = false;
nav.textLeft = "";
nav.title = "Ryder IT 服务管理系统";
nav.showRight = false;

let companyColumns = ref();
let RYD_CompanyNo = ref();
let RYD_UserId = inject("RYD_UserId");
let RYD_State = ref();

var otherCompany = ref("");

let loading = ref(true);

let demandNum = ref(0);

let show = ref(false);

let to = (name) => {
  router.push({
    name
  })
}

const getOtherDemandNum = () => {
  axios({
    method: 'get',
    url: '/api/OtherDemandNum?RYD_Company=' + RYD_CompanyNo.value + '&RYD_UserId=' + RYD_UserId
  }).then(res => {
    if (res == true) {
      otherCompany.value = "new";
    } else {
      otherCompany.value = "";
    }
  })
}
const getDemandNum = () => {
  axios({
    method: "get",
    url:
      "/api/DemandNum?RYD_Company=" +
      RYD_CompanyNo.value +
      "&RYD_UserId=" +
      RYD_UserId,
  }).then((res) => {
    if (res != null) {
      demandNum.value = res[0] + res[1] + res[2] + res[3];
    }
  });
}
let initData = () => {
  Promise.all([
    axios({
      method: "get",
      url: "/api/SetCompany",
    }).then((res) => {
      companyColumns.value = res;
      return res;
    }),
    axios({
      method: "get",
      url: "/api/GetState?RYD_UserId=" + RYD_UserId,
    }).then((res) => {
      RYD_State.value = res;
      if (RYD_State.value == "4") {
        Dialog.confirm({
          title: '注意',
          message: '请问你想打开IT服务管理系统还是应急预案管理系统',
          confirmButtonText: "IT服务管理系统",
          cancelButtonText: "应急预案管理系统",
          theme: 'round-button',
        })
          .then(() => {
            RYD_State.value = "1"
          })
          .catch(() => {
            router.push({ name: "AndroidContingencyPlan" });
          })
      }
    }),
    axios({
      method: "get",
      url: "/api/GetCompany?RYD_UserId=" + RYD_UserId,
    }).then((res) => {
      RYD_CompanyNo.value = res;

    }),
  ]).then(() => {
    loading.value = false;
    getDemandNum();
    getOtherDemandNum();
    setTimeout(() => {
      getDemandNum();
      getOtherDemandNum();
    }, 3000);
  });
  //获取公司列表
};

//切换公司
let setCompany = (value) => {
  loading.value = true;
  let companyName = "";
  companyColumns.value.forEach((element) => {
    if (element.ryD_CompanyNo == value) {
      companyName = element.ryD_CompanyName;
      return;
    }
  });
  axios({
    method: "Put",
    url: "/api/SetCompany",
    data: {
      RYD_CompanyNo: value,
      ryD_UserId: RYD_UserId,
    },
  })
    .then((res) => {
      loading.value = false;
      if (res == true) {
        Notify({ type: "success", message: "成功切换为" + companyName });

        router.go(0);
      } else {
        Notify({ type: "danger", message: "失败" });
      }
    })
    .catch(() => {
      loading.value = false;
      Notify({ type: "danger", message: "失败" });
    });
};

onMounted(() => {
  nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
    initData();
  });
});
</script>
<style>
#AHP .el-select__icon {
  z-index: auto;
}

#AHP .el-badge__content {
  top: 12px;
  right: 18px;
  border: none;
}
</style>
<style scoped>
.box {
  --el-color-primary: #466ca3;
  --van-cell-large-title-font-size: 18px;
  --van-cell-line-height: 30px;
  --van-cell-icon-size: 26px;
}

.el-select-dropdown__item {
  --el-color-primary: #466ca3;
}

.van-cell:after {
  border-bottom: 2px solid #dddddd;
}

.bubble {
  margin: 10px;
  font-size: 1rem;
  word-wrap: break-word;
  line-height: 1.5;
  overflow-wrap: break-word;
  padding: 8px 16px;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  white-space: pre-wrap;
  max-width: 680px;
  min-width: 1px;
}

.bubble-left {
  background-color: #fff;
  border-radius: 1px 10px 10px 10px;
}

.bubble-right {
  background-color: #466da338;
  border-radius: 10px 1px 10px 10px;
}
</style>
